<template>
  <el-dialog :title="$t('m.packaging.packaging')" :visible="popupVisible" width="1200px" center :before-close="close">
    <el-row class="three">
      <el-col align="center">{{$t('m.packaging.choose')}}</el-col>
      <el-col>
        <input readonly ref="barcode" class="barcode" v-model="formInline.barcode" :disabled="isAllowed" @keydown="onKeys" placeholder="Please scan package code">
      </el-col>
        <el-col align="center" :style="{'background':colorConfirm,'height':'150px'}">
          <span>{{scanData.packagename}}</span>
      </el-col>
      <el-col>
        <el-input
          ref="quantity"
          class="quantity"
          v-model.number="formInline.quantity"
          :disabled="!isAllowed"
          onkeyup="this.value = this.value.replace(/\D|^0/g,'')"
          @keyup.enter.native="confirm"
          placeholder="Please input package quantity">
        </el-input>
      </el-col>
    </el-row>
    <span slot="footer" class="dialog-footer">
      <el-button @click="back">{{$t('m.packaging.back')}}</el-button>
    </span>
  </el-dialog>
</template>
<script>
export default {
  name:'scanEvent',
  props:{
    popupVisible:{
      type:Boolean,
      default:false
    },
    quantityData:{
      type:Object,
      default:()=>{}
    },
    list:{ // 未处理过的子单数据
      type:Array,
      default:()=>[]
    }
  },
  data(){
    let initFields = ['code','lastTime','nextTime','lastCode','nextCode']
    Object.assign(this,initFields.reduce((val,current,arr)=>Object.assign(val,{[current]:'11'}),{}))
    return {
      formInline:{
        quantity:'', // 录入数量
        barcode:'' // 包材编号
      },
      scanData:{}, // 记录扫描后的
      isAllowed:false // 是否允许录入数量
    }
  },
  mounted(){
    // 设置默认焦点
    this.$nextTick(() => {
      this.$refs.barcode.focus()
    })
  },
  computed:{
    colorConfirm(){
      return this.scanData.color || ''
    }
  },
  methods:{
    onKeys:function(e){
      this.nextCode = e.which
      this.nextTime = new Date().getTime()
      if (this.lastCode != null && this.lastTime != null && this.nextTime - this.lastTime <= 30){
        this.code += String.fromCharCode(this.lastCode)
      } else if (this.lastCode != null && this.lastTime != null && this.nextTime - this.lastTime > 100){
        this.code = ''
      }
      this.lastCode = this.nextCode
      this.lastTime = this.nextTime
      if (e.which == 13){
        this.formInline.barcode = this.code
        this.code = ''
        this.scan(this.formInline.barcode)
      }
    },
    close(){
      this.$emit('close')
    },
    // 扫描详情dialog
    scan(barcode){
      let options = {
        method:'get',
        url:`packageinfo/barcode?barcode=${barcode}`
      }
      this.$axios(options).then(({data}) => {
        if(!data.state){ // 判断包材规格是否被停用
          this.formInline.barcode = ''
          return this.callbackMessage(this.$t('m.packaging.isDisabled'))
        }
        this.scanData = data
        this.isAllowed = true
        this.$nextTick(() => {
          this.$refs.quantity.focus() //输入框默认获取焦点
        })
      }).catch(() => {
        this.formInline.barcode = ''
      })
    },
    // 打包dialog提交
    confirm(){
      let {handledQuanlity} = this.quantityData // 获取当前没打包的子单index
      if(handledQuanlity+this.formInline.quantity>this.quantityData.totalQuantity){
        this.formInline.quantity = ''
        return this.callbackMessage(this.$t('m.packaging.notice1')) // 如果当前填入的运单子单数量+已经处理过运单子单数量 > 运单子单总数量
      }

      this.isAllowed = false
      let list = this.list.slice(0,this.formInline.quantity).map((item)=>{
        return {...item,...this.scanData}
      })
      let {packagename} = this.scanData
      let data = {
        ...{list,packagename},
        handledQuanlity:this.formInline.quantity // 当前处理的数量
      }
      this.$emit('callback',data)
    },
    // 返回上一步
    back(){
      this.$emit('back')
    }
  }
}
</script>
<style lang="scss" scoped>
  .three .el-col {
    margin-bottom: 20px;
    color: #333333;
    &:first-child {
      height:65px;
      line-height:65px;
      border-radius: 3px;
      background-color:#d7d7d7;
      font-size:30px
    }
    &:nth-child(3) {
      line-height:150px;
      font-size:50px
    }
  }
  ::v-deep.barcode {
    width: 100%;
    height: 65px;
    font-size: 28px;
    text-align: center;
    border: 1px solid #c0c4cc;
  }
  .barcode:focus {
    outline: 0;
    border: 1px solid #409eff;
  }
  ::v-deep.quantity .el-input__inner {
    height: 80px;
    text-align: center;
    font-size: 50px;
    &::placeholder {
       font-size:50px;
    }
  }
  ::v-deep .el-dialog__title {
    font-size: 24px;
  }
  .el-button {
    font-size: 26px;
    width: 30%;
    height: 56px;
    border-radius: 28px;
  }
</style>